import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/component/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/component/DailyBill/billListData'
import { useNavigate } from 'react-router-dom'
import { useState} from 'react'
import { useDispatch} from 'react-redux'
import { asyncAddBillList } from '@/store/modules/biiStore'
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid';
const New = () => {
  const navigate = useNavigate()
  const [tag,setTag] = useState('pay')
  const [date,setDate] = useState('')
  const [visible, setVisible] = useState(false)
 
  const toggleTag = (newTag)=>{
    setTag(newTag)
   

  }
  const changeVisible = (val)=>{
    setVisible(true)
  }
  const setVisibleFalse = (val)=>{
    setVisible(false)
     if(val){
      setDate(dayjs(val).format("YYYY-MM-DD HH:mm:ss"))
    }
  }
  const [typeSelected,setTypeSelected] = useState('')
  const isSelected =(type)=>{
    // console.log(type);
    setTypeSelected(type)
  }
  //money
  const [money,setMoney] = useState(0)
  const onSetMoney = (value)=>{
    setMoney(value)
  }
 const NewBillData= {
    type:tag,
    money:tag==='pay'?-money:+money,
    date:date?date:dayjs().format("YYYY-MM-DD HH:mm:ss"),
    useFor:typeSelected,
    id:uuidv4()
  }
  // 保存
  const dispatch = useDispatch()
 
  const onSave = ()=>{
    console.log('NewBillData',NewBillData);
    dispatch(asyncAddBillList(NewBillData))
  }
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(tag === 'pay' && 'selected')}
            onClick={()=>toggleTag('pay')}
          >
            支出
          </Button>
          <Button
            className={classNames({selected:tag==='income'})}
            shape="rounded"
            onClick={()=>toggleTag('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" >
              <Icon type="calendar" className="icon" />
              <span 
              onClick={changeVisible}
              className="text">{'今天'}</span>
              <DatePicker
                visible={visible}
                className="kaDate"
                title="记账日期"
                max={new Date()}
                onConfirm={(val)=>setVisibleFalse(val)}
                onCancle={setVisibleFalse}
                onClose={setVisibleFalse}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={onSetMoney}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[tag].map(item => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map(item => {
                  return (
                    <div
                    onClick={()=>isSelected(item.type)}
                      className={classNames(
                        'item',
                        item.type === typeSelected &&'selected'
                      )}
                      key={item.type}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className="btns">
        <Button 
        onClick={onSave}
        className="btn save">
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New